<template>
  <div class="mainDiv">
      <mt-search  v-model="search.name" cancel-text="取消"  placeholder="搜索" :show=true style="position: relative">
        <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="disableLoading" infinite-scroll-distance="10" style="padding-top: 5px">
          <mt-cell class="border-bot" title="您的选择情况："></mt-cell>
          <div class="">
            <mt-cell >
             <div slot="title">
             您的高考总分为：<b style="margin-right: 60px;">{{userInfo.score_total}}</b> 位次：<b >{{userInfo.rankNum}}</b>
            </div>
            </mt-cell>
            <mt-cell  class="border-bot">
            <div slot="title">
            您的选考科目为：<b v-for="subject in userInfo.subjects" style="margin-right: 15px;">{{subject}}</b>
            </div>
           </mt-cell>
            <mt-cell class="border-bot">
             <div slot="title">
              您选择的省份为：<b v-for="item in search.provinces" style="margin-right: 15px;line-height: 30px;">{{item}}</b>
            </div>
            </mt-cell>
            <mt-cell class="border-bot">
             <div slot="title">
              您选择的名次为({{search.title}})：<b>{{search.fromRank}}</b>~&nbsp;&nbsp;<b class="mr10">{{search.toRank}}</b>
            </div>
            </mt-cell>
           <mt-cell>
            <div slot="title">
           您选择的专业为：<span v-if="search.majors && search.majors.length">({{search.level}})：<b class="mr10" v-for="item in search.majors" style="line-height: 30px;">{{item}}</b></span>
            <span v-else>：<b>不限</b></span>
            </div>
           </mt-cell>
          </div>
          <div class="line"></div>
         <mt-cell class="border-bot" title="可选择的范围有："></mt-cell>
         <div class="flex-center">
           <div>学校:<b class="ml10">{{total.totalSchool}}所</b></div>
           <div>专业:<b class="ml10">{{total.totalMajor}}个</b></div>
           <div>招生计划:<b class="ml10">{{total.totalPeople}}个</b></div>
         </div>
          <div class="major"  v-for="cell in majorPage.data"  >
              <div class="pad5 school_name">{{cell.school_full_name}}</div>
            <div  class="pad5 cellLabel"><span v-for="label in cell.labels" v-show="label">{{label}}</span></div>
            <div class="pad5"><b>{{cell.majorName}}</b></div>
            <table class="schoolTab">
              <tr><td><label class="smallLable">学制(年)：</label>{{cell.schooling_length}}</td>
                  <td><label class="smallLable">专业层次：</label>{{cell.majorLevel}}</td>
                  <td><label class="smallLable">招生计划：</label>{{cell.pepole_num2}}</td>
              </tr>
              <tr>
                <td> <label class="smallLable">学费：</label> {{cell.fee}}/年</td>
                <td colspan="2"><label class="smallLable">选考科目：</label>{{cell.subject}}</td>
               </tr>
              <tr>
                <!--<td style="padding-right:5px"><label class="smallLable">年最低分：</label>{{cell.join_score}}</td>-->
                <td ><label class="smallLable">参考位次：</label>{{cell.join_rank}}</td>
               </tr>
            </table>
            <span  :class="cell.checked ? 'collectBtn1':'collectBtn'"  @click="toggleCollection(cell)">{{cell.checked?'已添加':'添加+'}}</span>
            <div class="chance">
              <div class="figure">{{cell.chance}}%</div>
              <label >录取概率</label>
            </div>
          </div>
        </div>
      </mt-search>
  </div>
</template>

<script>
    export default {
        name: "intention",
        data() {
        return {
          search:{},
          disableLoading: false,
          userInfo:{},
          majorPage:{pageIndex:-1,data:[]},
          total:{totalPeople:1,totalMajor:1,totalSchool:1}
        }
      },
      watch: {
         'search.name': function (val, oldVal) {
          this.majorPage={pageIndex:-1,data:[]}
          this.loadMore();
          console.log(val);
        }
      },
      methods:{
        toggleCollection:function(major){
          if(!major.checked){

            let rank_inter = this.search.title =="冲"?1:(this.search.title =="稳"?2:3);
            this.$http.post("/auth/saveCollection",{major_id:major.id,rank_inter:rank_inter}).then(resp=>{
              if(resp.code == 0){
                major.checked = true;
              }
            })
          }else{
            this.$http.get("/auth/delCollection?major_id="+major.id).then(resp=>{
              if(resp.code == 0){
                major.checked = false;
              }
            })
          }
        },
        loadMore:function(){
          this.disableLoading = true;
          let vm = this;
          vm.search.pageIndex = this.majorPage.pageIndex+1;

          this.$http.post("/auth/queryMajor",changeDataType(vm.search)).then((resp)=>{
            vm.majorPage.pageIndex = resp.data.pageIndex;
            vm.majorPage.pageTotal = resp.data.pageTotal;
            resp.data.data.forEach(n=>{
              n.labels = [];
              n.labels.push(n.sheng,n.is985,n.is211,n.schoolLevel,n.nature);
            })
            vm.majorPage.data.push.apply(vm.majorPage.data, resp.data.data);
            if(resp.data.pageIndex +1 != resp.data.pageTotal){
              vm.disableLoading = false;
            }
          })
        },
      },
      beforeMount(){
        console.log(this.$route.query.batch);
        let vm = this;
        Object.assign(vm.search, this.$route.query);
        //vm.search = JSON.parse(JSON.stringify(this.$route.query));
        vm.search.year = vm.$root.year;
        vm.$http.post("/auth/gradeRet",changeDataType(vm.search)).then(resp=>{
          vm.total = resp.data;
        })
      },
      created(){
        let vm = this;
        checkLogin(this,function(){
          if(!vm.userInfo || vm.userInfo.subjects.length == 0){
            //用户未选择自考科目
            vm.$router.push({path:"/student/score"});
          }
        })
      }
    }
</script>

<style  scoped>
  .major{
    border-bottom: 1px solid lightgray;
    /* width: 100%; */
    padding: 5px;
    position: relative;
  }
  .cellLabel{
    color:lightskyblue;
  }
  .cellLabel span{
    padding-right: 5px;
  }
  .smallLable{
    /* color: #808080; */
    font-size: 12px;
  }
  .cellVal{
    font-size: 14px;
  }
 .school_name{
   margin-right: 60px;
 }
.collectBtn{
  width: 40px;
  line-height: 22px;
  position: absolute;
  border: 1px solid darkorange;
  border-radius: 4px;
  padding: 1px 3px;
  top:10px;right: 10px;
  font-size: 70%;text-align: center;
  color: darkorange;
}
.collectBtn1{
   width: 40px;
  line-height: 22px;
  position: absolute;
  border: 1px solid #D6D6D6;
  border-radius: 4px;
  padding: 1px 3px;
  top:10px;right: 10px;
  font-size: 70%;text-align: center;
  color: #999999;
}

  .chance{
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-family: 楷体;
  }
  .chance .figure{
    font-size: 28px;
    color:red;
  }
  .chance label{
    font-size:12px;
  }
  .col-2{
    display: flex;
    margin: 0 10px;
    height: 30px;
    line-height: 40px;
  }
  .flex-center{
   height: 40px;
   line-height: 40px;
   margin: 0 10px;
   display: flex;
   justify-content: space-between;
 }
 .flex-center b{
   color: #058CF2;
 }
 .schoolTab tr td{
   font-size: 10px;
   color: #999999;
 }
</style>
